<template>
<div class="myMusic">
  <div class="container">
    <div class="sideContainer">
      <ul class="sideList">
        <li class="item hover">我的歌手({{userCount.artistCount}})</li>
        <li class="item hover">我的视频({{userCount.mvCount}})</li>
        <li class="item active">
          <i class="iconfont icon-bofang"></i>创建的歌单({{userCount.createdPlaylistCount}})
          <ul class="createdContainer">
            <li v-for="(item, index) in createSongs" :key="item.id" :class="detailId === item.id ? 'subHover' : ''" @click.stop="handleShowDetail(item.id)">
              <img :src="item.coverImgUrl" :alt="item.name">
              <div class="playlistName">
                <p>{{index ? item.name : '我喜欢的音乐'}}</p>
                <p>{{item.trackCount}}首</p>
              </div>
            </li>
          </ul>
        </li>
        <li class="item active">
          <i class="iconfont icon-bofang"></i>收藏的歌单({{userCount.subPlaylistCount}})
          <ul class="createdContainer">
            <li v-for="item in collectionSongs" :key="item.id" :class="detailId === item.id ? 'subHover' : ''" @click.stop="handleShowDetail(item.id)">
              <img :src="item.coverImgUrl" :alt="item.name">
              <div class="playlistName">
                <p>{{item.name}}</p>
                <p>{{item.trackCount}}首</p>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content" v-if="userSongs.length && detailId">
      <Detail :id="detailId" width="100%"/>
    </div>
  </div>
</div>
</template>

<script>
import Detail from '../../components/Detail'
export default {
  name: 'MyMusic',
  components: {
    Detail
  },
  data () {
    return {
      userSongs: [],
      userCount: {},
      showChild: '',
      detailId: 0
    }
  },
  computed: {
    createSongs () {
      return this.userSongs.slice(0, 3)
    },
    collectionSongs () {
      return this.userSongs.slice(3)
    }
  },
  methods: {
    async init () {
      const res = await this.$http.get('/user/subcount', { withCredentials: true })
      this.userCount = res.data
    },
    async getUserSongs () {
      let userId = this.$store.state.userInfo.userId
      if (!userId) {
        const LoginStatus = await this.$http.get(`/login/status?timerstamp=${Date.now()}`, { withCredentials: true })
        userId = LoginStatus.data.data.profile.userId
        console.log('发送请求')
      }
      const res = await this.$http.get(`/user/playlist?uid=${userId}`)
      // 第一个是我喜欢的音乐
      this.userSongs = res.data.playlist
      this.detailId = this.userSongs[0].id
      this.init()
    },
    handleShowDetail (id) {
      this.detailId = id
      console.log(this.detailId)
    }
  },
  created () {
    this.getUserSongs()
  }
}
</script>

<style lang="less" scoped>
.myMusic{
  margin-top: 5px;
}
.container{
  width: 1100px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
}

.sideContainer{
  width: 25%;
  float: left;
  // background-color: aqua;
  padding: 20px 0;
  overflow: hidden;
  .sideList{
    overflow: auto;
    height: 100%;
    .item{
      position: relative;
      padding: 10px 0 10px 50px;
      // margin: 15px 0;
      cursor: pointer;
      font-weight: 600;
      // background-color: blue;
      .iconfont{
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translate(0, -50%);
      }
    }
    .active{
      & .createdContainer{
        display: block;
      }
      .iconfont{
        top: 13px;
        transform: rotate(90deg);
      }
    }
    .hover:hover, .createdContainer li:hover, .subHover{
      background-color: #ddd;
    }
    .createdContainer{
      // background-color: chocolate;
      display: none;
      li{
        overflow: hidden;
        margin: 10px 0;
        img{
          display: block;
          width: 40px;
          height: 40px;
          float: left;
          margin-right: 10px;
        }
        .playlistName{
          float: left;
          font-size: 14px;
          font-weight: 500;
          p:last-child{
            color: #999;
          }
          p{
            // 单行省略
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 130px;
          }
        }
      }
    }
  }
}

.content{
  width: 70%;
  float: left;
  padding: 20px;
}
</style>
